import { Button } from 'antd';
import type React from 'react';
import {
  attachOldStation,
  detachOldStation,
} from '@/components/MapView/Mapless';
import styles from '../../index.module.less';
import type { TestControlProps } from '../types';

const Index: React.FC<TestControlProps> = ({ maplessRef }) => {
  function onDraw1(): void {
    const sMan1 = attachOldStation(maplessRef.current, 'sm1');
    sMan1?.drawStations([
      {
        id: '1',
        name: '测试站点1-1',
        longitude: 113.264,
        latitude: 23.129,
        type: 'fixed',
        category: '',
        state: 'normal',
        selected: true,
      },
      {
        id: '2',
        name: '测试站点1-2',
        longitude: 113.273,
        latitude: 23.135,
        type: 'mobile',
        category: '',
        state: 'busy',
        azimuth: 270,
      },
    ]);
  }
  function onDraw2(): void {
    const sMan2 = attachOldStation(maplessRef.current, 'sm2');
    sMan2?.drawStations([
      {
        id: '1',
        name: '测试站点2-1',
        longitude: 113.264,
        latitude: 23.129,
        type: 'fixed',
        category: '',
        state: 'error',
        selected: true,
      },
      {
        id: '2',
        name: '测试站点2-2',
        longitude: 113.273,
        latitude: 23.135,
        type: 'movable',
        category: '',
        state: 'offline',
        azimuth: 270,
      },
    ]);
  }
  function onSwitch1(): void {
    const sm1 = maplessRef.current?.getByName('sm1');
    const sm2 = maplessRef.current?.getByName('sm2');
    if (sm1 && sm2) {
      maplessRef.current?.moveManagerLayers(sm1, sm2);
    }
  }
  function onSwitch2(): void {
    const sm1 = maplessRef.current?.getByName('sm1');
    const sm2 = maplessRef.current?.getByName('sm2');
    if (sm1 && sm2) {
      maplessRef.current?.moveManagerLayers(sm2, sm1);
    }
  }
  function onClear(): void {
    detachOldStation(maplessRef.current, 'sm1');
    detachOldStation(maplessRef.current, 'sm2');
  }

  return (
    <div className={styles.test}>
      <Button onClick={onDraw1}>绘制站点列表1</Button>
      <Button onClick={onDraw2}>绘制站点列表2</Button>
      <Button onClick={onSwitch1}>下移站点列表1</Button>
      <Button onClick={onSwitch2}>下移站点列表2</Button>
      <Button onClick={onClear}>清除</Button>
    </div>
  );
};

export default Index;
